<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>考核内容</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Button custom-icon="iconfont icon-fangkuai2" type="primary" size="small" style="float:right"  @click="creata">新建考核</Button>
            <Select v-model="queryData.category" style="width:150px" :clearable=true placeholder="项目类别">
                  <Option value="1">常规考核打分</Option>
                  <Option value="2">加分考核打分</Option>
                  <Option value="3">减分考核打分</Option>
              </Select>
            <Select v-model="queryData.assessment" style="width:150px; margin: 0 10px;" :clearable=true placeholder="考核方式">
                <Option value="1">查阅资料</Option>
                <Option value="2">现场核查</Option>
                <Option value="3">听取汇报</Option>
            </Select>
            <Button type="primary" custom-icon="iconfont icon-chaxun"  size="small" @click="getTableData">查找</Button>
        </div>
        </Card>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table
              border
              :columns="list.columns"
              :data="list.tableData"
            ></Table>
          </div>
          <div>
            <Page
              :total="queryData.totalRecord"
              :page-size="queryData.limit"
              :current="queryData.page"
              show-total
              show-elevator
              @on-change="changePage"
            ></Page>
            <span style="float: right;">共{{queryData.totalRecord}}条数据</span>
          </div>
        </div>
      </div>

      <!--新建/修改用户-->
        <Modal v-model="creaUp.modal1" :title="creaUp.title" :loading="creaUp.loading" @on-ok="sendPost">
          <Form ref="check" :model="creaUp.data" :label-width="80" :rules="creaUp.rules">
            <FormItem label="项目类别" prop="category">
              <Select v-model="creaUp.data.category" style="width:300px">
                  <Option value="1">常规考核打分</Option>
                  <Option value="2">加分考核打分</Option>
                  <Option value="3">减分考核打分</Option>
              </Select>
            </FormItem>
            <FormItem label="考核方式" prop="assessment">
              <Select v-model="creaUp.data.assessment" style="width:300px">
                  <Option value="1">查阅资料</Option>
                  <Option value="2">现场核查</Option>
                  <Option value="3">听取汇报</Option>
              </Select>
            </FormItem>
            <FormItem label="评分方式" prop="score">
              <Input placeholder="请输入" v-model="creaUp.data.score" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="考核内容" prop="content">
              <Input placeholder="请输入" v-model="creaUp.data.content" style="width:300px;"/>
            </FormItem>
            <FormItem label="分值" prop="points">
              <Input placeholder="请输入" v-model="creaUp.data.points" style="width:300px;"/>
            </FormItem>
          </Form>
        </Modal>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from '@/api/base_sys/gcDispenser.js'
import { Message } from 'iview'

export default {
  data () {
    return {
      url: '/api/voStandard/',

      list: {
        selections: [],
        // 列表展示数据
        tableData: [],
        columns: [
          {
            title: '序号',
            key: 'id',
            align: 'center',
            minWidth: 60
          },
          {
            title: '项目类别',
            // key: "category",
            align: 'center',
            minWidth: 80,
            render: (h, p) => {
              let a = p.row.category
              let r
              switch (a) {
                case 1:r = '常规考核打分'; break
                case 2:r = '加分考核打分'; break
                case 3:r = '减分考核打分'; break
                default: r = a; break
              }
              return h('div', r)
            }
          },
          {
            title: '考核方式',
            align: 'center',
            minWidth: 100,
            render: (h, p) => {
              let a = p.row.assessment
              let r
              switch (a) {
                case 1:r = '查阅资料'; break
                case 2:r = '现场核查'; break
                case 3:r = '听取汇报'; break
                default: r = a; break
              }
              return h('div', r)
            }
          },
          {
            title: '评分方式',
            key: 'score',
            align: 'center',
            minWidth: 100
          },
          {
            title: '考核内容',
            key: 'content',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('div', [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  },
                  domProps: {
                    title: params.row.content
                  }
                }, params.row.content)
              ])
            }

          },
          {
            title: '分值',
            key: 'points',
            align: 'center',
            minWidth: 100
          },
          {
            title: '分值上限',
            key: 'upperLimit',
            align: 'center',
            minWidth: 100
          },
          {
            title: '创建时间',
            key: 'createTime',
            align: 'center',
            minWidth: 100
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            render: (h, p) => {
              return h('div', [
                h('i-button', {
                  props: { type: 'default', size: 'small' },
                  style: { margin: '0 3px' },
                  on: {
                    click: () => { this.updata(p.row.id) }
                  }
                }, '编辑'),
                h('i-button', {
                  props: { type: 'error', size: 'small' },
                  style: { margin: '0 3px' },
                  on: {
                    click: () => { this.dele(p.row.id) }
                  }
                }, '删除')
              ])
            }
          }
        ]
      },

      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        category: '', // 项目类别
        assessment: '' // 考核方式
      },
      upid: '',
      creaUp: {
        med: '',
        modal1: false,
        loading: false,
        title: '',
        data: {
          // id: '',
          category: '', // 项目类别
          assessment: '', // 考核方式
          score: '', // 评分方式
          content: '', // 考核内容
          points: '' // 分值
        },
        rules: { // check
          category: [{ required: true, message: '请填写项目类别', trigger: 'blur' }],
          assessment: [{ required: true, message: '请填写考核方式', trigger: 'blur' }],
          score: [{ required: true, message: '请填写评分方式', trigger: 'blur' }],
          content: [{ required: true, message: '请填写考核内容', trigger: 'blur' }],
          points: [
            { required: true, message: '请填写分值', trigger: 'blur' },
            { type: 'number', trigger: "blur", message: "请输入正确的分值", transform(value) {return Number(value);}}
          ]
        }
      }
    }
  },
  created () {
    this.getTableData()
  },
  watch: {
    'creaUp.modal1': function (n, o) {
      console.log(n, o)
    }
  },
  methods: {
    // 获取列表
    async getTableData () {
      console.log(this.queryData)
      this.queryData.totalRecord = undefined
      let result = (await gcDispenserApi.getData(this.url + 'page', this.queryData)).data
      console.log('result:', result)
      this.list.tableData = result.list
      this.queryData.totalRecord = result.totalRecord
      this.queryData.limit = result.pageSize
    },
    // 分页切换
    changePage (index) {
      this.queryData.page = index
      this.getTableData()
    },
    // 查询
    inQuire () {
      this.queryData.page = 1
      this.getTableData()
    },
    all () {
      this.queryData.category = ''
      this.queryData.assessment = ''
      this.getTableData()
    },
    // 更新
    async updata (index) {
      let c = this.creaUp
      c.modal1 = true
      c.med = 'up'
      c.title = '编辑考核'
      this.upid = index
      // c.data.id = index
      let r = (await gcDispenserApi.getData(this.url + index)).data
      c.data.category = String(r.category)
      c.data.assessment = String(r.assessment)
      c.data.score = r.score
      c.data.content = r.content
      c.data.points = r.points
      c.data.upperLimit = r.upperLimit
      console.log('up', r)
    },
    // 新建
    async creata () {
      let c = this.creaUp
      c.med = 'cr'
      c.modal1 = true
      c.title = '新建考核'
      this.clear()
    },
    async dele (index) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "确定要删除本条考核吗？",
        loading: true,
        onOk: async () => {
          let result = await gcDispenserApi.del(this.url + index)
          if (result.data) {
            this.$Message.success('操作成功')
            this.getTableData()
            this.$Modal.remove();
            console.log(result)

          } else {
            console.log(result)
            this.$Message.error(result.message)
          }
        }
      })
      
    },
    clear () {
      let c = this.creaUp
      c.data.category = ''
      c.data.assessment = ''
      c.data.score = ''
      c.data.content = ''
      c.data.points = ''
      c.data.upperLimit = ''
    },
    // 提交数据
    sendPost () {
      let c = this.creaUp
      console.log('提交')
      this.$refs['check'].validate(async valid => {
        if (!valid) {
          console.log('no')
          this.changeLoading()
        } else if (valid) {
          console.log(this.url, c.data)
          let data
          switch (c.med) {
            case 'up': data = await gcDispenserApi.update(this.url + this.upid, this.creaUp.data); break
            case 'cr': data = await gcDispenserApi.add(this.url, this.creaUp.data); break
            default: this.$Message.error('这种错误不可能出现'); break
          }
          let result = data.data
          let message = data.message
          if (result) {
            console.log('!!!')
            this.$Message.success('操作成功')
            console.log(result)
            this.getTableData()
            c.modal1 = false
          } else {
            console.log(result)
            this.$Message.error(message)
          }
        }
      })
    },
    // 改变load状态
    changeLoading () {
      this.creaUp.modal1 = false
      this.$nextTick(() => {
        this.creaUp.modal1 = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
